<template>
	<eui-page-frame topHeight="464">
		<template #top>
				<view class="content-img" :style="[bgimage]">
						<eui-nav-bar />
				</view>
				<view style="margin: -30rpx 20rpx 0;">
					<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" @change="tabChange"></eui-tab>
				</view>
		</template>
		<eui-page-content>
			<eui-base-card v-for="(item, index) in dataList" :key="index" @click="openDetail(item)"
				:title="item.project">
				<!-- <template #left>
					<view class="e-attachment">
						<image class="e-attachment__image" :src="item.cover" mode="aspectFill" />
					</view>
				</template> -->
				<template #right>
					<eui-tag :text="item.status" :type="'待评价,已完成'.includes(item.status)?'success':undefined" plain plainFill :showBorder="false"> </eui-tag>
				</template>
				<eui-detail-show :items="dataItems" v-model="dataList[index]" size="small"></eui-detail-show>
				<!-- <eui-line margin="20rpx 0rpx -20rpx 0rpx"></eui-line> -->
			</eui-base-card>

			<eui-base-card v-if="dataList.length == 0">
				<view class="nodata">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
				</view>
			</eui-base-card>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'
import useService from '@/hooks/useService';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_wxpg_blue.png);":'background-image: url(../../../static/img/rdsImgs/top_wxpg_orange.jpg);'
const themeColor = ref(theme._object.theme=='theme-blue'?'#02B7E6':'#FF6430')
const service = useService({ prefix: "apiApi" });

const whereList = ref([
	{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DA', c_logic: "而且" },
	{ c_col: "c_work_status", c_oper: "包含", c_value: '1,3', c_logic: "而且" },
])

const dataItems = [
	{
		label: "申请人",
		prop: "user",
		type: "text",
		element: {
		},
	},
	{
		label: "申请日期",
		prop: "date",
		type: "text",
		element: {
			mode: 'YYYY-MM-DD'
		},
	},
	{
		label: "申请内容",
		prop: "content",
		type: "text",
		element: {
		},
	},
]

const tabData = ref([{ name: '全部' }, { name: '待处理' }, { name: '已处理' }]);

const tabIndex = ref(0);
const spaceLeft = ref(6);

const dataList = ref([
	// { project: '', user: '', date: '', content: '', status: '', cover: '../../../static/img/homeImgs/notfound.png' },
]);

const tabChange = (e) => {
	tabIndex.value = e;
	const value = e === 1 ? '1' : (e === 2 ? '3' : '1,3');
	if (value) {
		whereList.value = [
			{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DA', c_logic: "而且" },
			{ c_col: "c_work_status", c_oper: "包含", c_value: value, c_logic: "而且" },
		]
	}
	else {
		whereList.value = [
			{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DA', c_logic: "而且" },
			{ c_col: "c_work_status", c_oper: "包含", c_value: '1,3', c_logic: "而且" },
		]
	}
	getApplyData();
}

onShow(() => {
	getApplyData();
})

//获取申请数据
const getApplyData = async () => {
	const req = {
		WhereList: whereList.value
	}
	
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通物业模块服务', 'EnjoyQueryList', req);
	uni.hideLoading();
	dataList.value = [];
	if (res && res.ReturnObject) {
		console.log('申请数据', JSON.stringify(res.ReturnObject))
		const objectData = res.ReturnObject;
		if (objectData.length > 0) {
			dataList.value = objectData.map(x => {
				return {
					c_work_id: x.c_work_id,
					project: x.c_property_type_name,
					user: x.c_req_user,
					date: x.c_req_dt,
					content: x.c_question,
					status: x.c_work_status_name,
					cover: '../../../static/img/homeImgs/notfound.png'
				}
			});
		}
	}
}
const openDetail = (e) => {
	uni.navigateTo({
		url: `./detail?id=${e.c_work_id}&project=${encodeURIComponent(e.project)}`
	});
}
</script>

<style lang="scss">
.content-img {
	background-image: url(../../../static/img/rdsImgs/top_wxpg_blue.png);
	background-size: 100% 400rpx;
	background-repeat: no-repeat;
	width: 100%;
	height: 400rpx;
}

.nodata {
	width: 100%;
	height: 560rpx;
	image {
		width: 100%;
		height: 80%;
		opacity: 0.4;
	}
}

.card {
	border-radius: 16rpx;
	//margin: 0px 10px 10px 10px;
	background-color: #ffffff;
}

.e-attachment {
	align-items: center;
	justify-content: center;
	display: flex;

	&__image {
		width: 230rpx;
		height: 230rpx;
		margin: 12rpx;
		border-radius: 10rpx;
	}
}
</style>